<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>代理菜单配置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	#parse('/headFiles.html')
  <style type="text/css">
	#selectedPanel .layui-card-body>p span{margin-right: 5px;}
	#selectedPanel .layui-card-body>p{margin-bottom:10px;}
	#selectedPanel .layui-card-body>p .layui-icon {position:relative;left: 5px;top: 2px;cursor: pointer;}
	.label{padding: 0.2em 0.6em 0.3em;font-size: 75%;font-weight: 700;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: 0.25em;}
	.label-primary{background-color:#3c8dbc !important;}
	.label-warning{background-color: #f39c12 !important;}
	.checkbox>label {padding-left: 5px;}
	.checkbox>.layui-icon {cursor: pointer;color: #337ab7;}
	.checkbox>.layui-icon.layui-icon-add-circle-fine {color: #990000;}
	#btnSubmit{float:right;margin-top:5px;}
  </style>
</head>
<body>
<div class="layui-fluid">
	<div class="layui-card" id="selectedPanel">
		<div class="layui-card-header layui-clear">[$!{agentType.name}]已选择的菜单
			<button class="layui-btn layui-btn-sm" id="btnSubmit">保存</button>
		</div>
		<div class="layui-card-body"></div>
		<form action="$!{webRoot}/agent/type/menu/config.do" method="post">
			<input type="hidden" name="typeId" value="$!{id}" />
			<input type="hidden" name="data" value="$!{data}" />
		</form>
	</div>
	<div class="layui-row layui-col-space10">
		<div class="layui-col-sm3">
			<div class="layui-card" id="rootMenuPanel">
				<div class="layui-card-header">主菜单</div>
				<div class="layui-card-body">
					#foreach($item in $rootMenuList)
					<div class="checkbox" id="r$!{item.id}">
						<i class="layui-icon layui-icon-add-circle-fine"></i> <label
							data-name="$!{item.name}" data-id="$!{item.id}">$!{item.name}</label>
					</div>
					#end
				</div>
			</div>
		</div><!-- /.layui-col-sm3 -->
		<div class="layui-col-sm3">
			<div class="layui-card" id="menuPanel1" style="display: none;">
				<input type="hidden" name="id" />
				<div class="layui-card-header">子菜单</div>
				<div class="layui-card-body"></div>
			</div>
		</div>
		<div class="layui-col-sm3">
			<div class="layui-card" id="menuPanel2" style="display: none;">
				<input type="hidden" name="id" />
				<div class="layui-card-header">子菜单</div>
				<div class="layui-card-body"></div>
			</div>
		</div>
		<div class="layui-col-sm3">
			<div class="layui-card" id="menuPanel3" style="display: none;">
				<input type="hidden" name="id" />
				<div class="layui-card-header">子菜单</div>
				<div class="layui-card-body"></div>
			</div>
		</div>
	</div>
</div>
#parse('/footFiles.html')
<script type="text/javascript">
	var data = $!{data};
	var labelClass = ['label-primary','label-success','label-info']

	function show(){
		$('#selectedPanel .layui-card-body').empty();
		$(data).each(function(i,item){
			$('#selectedPanel .layui-card-body').append('<p id="p'+i+'"></p>');
			var el = $('#p'+i);
			el.append('<span class="label label-warning" data-id="'+item.id+'">'+item.name+'<i class="layui-icon layui-icon-close"></i></span>');
			next(item.children,el,0);
		});
		selectPanel_click();
		$('#rootMenuPanel .checkbox>.layui-icon.layui-icon-ok-circle').removeClass('layui-icon-ok-circle').addClass('layui-icon-add-circle-fine');
		$(data).each(function(i,item){
			$('#r'+item.id+'>.layui-icon').removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
		});
	}

	function next(arr,el,index){
		$(arr).each(function(i,item){
			let cc = el;
			if(index == 0){
				el.append('<p id="c'+i+'" style="margin-top:10px;margin-left:30px;"></p>');
				cc = el.find('#c'+i);
			}
			cc.append('<span class="label '+labelClass[index]+'" data-id="'+item.id+'">'+item.name+'<i class="layui-icon layui-icon-close"></i></span>');
			next(item.children,cc,(index+1));
		});
	}

	function add(pid,id,name){
		var arr = data;
		if(pid != null){
			var item = get(data,pid);
			if(item){
				if(!item.children){item.children = [];}
				arr = item.children
			}
		}
		var flag=false;
		$(arr).each(function(i,item){
			if(item.id == id){
				flag=true;
				return false;
			}
		});
		if(flag==false){arr.push({id:id,name:name,children:[]});show();}
	}

	function remove(pid,id){
		var arr = data;
		if(pid != null){
			var item = get(data,pid);
			if(item){
				arr = item.children;
			}
		}
		$(arr).each(function(i,item){
			if(item.id == id){
				arr.splice(i,1);
				show();
				return false;
			}
		});
	}

	function removeToArray(arr,id){
		var flag = false;
		$(arr).each(function(i,item){
			if(item.id == id){
				arr.splice(i,1);
				flag = true;
				show();
				return false;
			}else{
				flag = removeToArray(item.children,id);
				if(flag){return false;}
			}
		});
		return flag;
	}

	function get(arr,id){
		var temp = null;
		$(arr).each(function(i,item){
			if(item.id == id){
				temp=item;
				return false;
			}else{
				temp = get(item.children,id);
				if(temp){return false;}
			}
		});
		return temp;
	}

	$('#rootMenuPanel .checkbox>.layui-icon').click(function(){
		var t=$(this).parent().find('label');
		var id = $(t).data('id');
		var name = $(t).data('name');
		if($(this).hasClass('layui-icon-add-circle-fine')){
			$(this).removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
			add(null,id,name)
			showPanel1(id,name);
		}else{
			$(this).removeClass('layui-icon-ok-circle').addClass('layui-icon-add-circle-fine');
			remove(null,id);
			$('#menuPanel1').hide();
			$('#menuPanel2').hide();
			$('#menuPanel3').hide();
		}
	})

	$('#rootMenuPanel .checkbox>label').click(function(){
		var name=$(this).data('name');
		var id=$(this).data('id');
		$(this).parent().find('.layui-icon-add-circle-fine').removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
		add(null,id,name);
		showPanel1(id,name);
	});
	
	function showPanel1(id,name){
		$('#menuPanel1 input[name="id"]').val(id);
		$('#menuPanel1 .box-header .box-title').html(name);
		$.getJSON('$!{webRoot}/agent/menu/child.data',{id:id},function(res){
			if(res.code == 200){
				$('#menuPanel1 .layui-card-body').empty();
				var arr = get(data,id).children;
				$(res.body).each(function(i,item){
					var str = 'layui-icon-add-circle-fine';
					$(arr).each(function(j,val){
						if(val.id == item.id){
							str='layui-icon-ok-circle';
							return;
						}
					});
					$('#menuPanel1 .layui-card-body').append('<div class="checkbox"><i class="layui-icon '+str+'"></i>'
						+'<label data-name="'+item.name+'" data-id="'+item.id+'">'+item.name+'</label></div>');
				});
				$('#menuPanel1').show();
				$('#menuPanel2').hide();
				$('#menuPanel3').hide();
				menuPanel1_click1();
				menuPanel1_click2();
			}else if(res.code == 202){
				$('#menuPanel1 .layui-card-body').empty().append('<h5>暂无数据</h5>');
				$('#menuPanel1').show();
			}else{
				layer.msg(res.msg,{icon: 2});
			}
		});
	}
	
	function menuPanel1_click1(){
		$('#menuPanel1 .checkbox>.layui-icon').click(function(){
			var pid = $('#menuPanel1 input[name="id"]').val();
			var t=$(this).parent().find('label');
			var id = $(t).data('id');
			var name = $(t).data('name');
			if($(this).hasClass('layui-icon-add-circle-fine')){
				$(this).removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
				add(pid,id,name);
				showPanel2(id,name);
			}else{
				$(this).removeClass('layui-icon-ok-circle').addClass('layui-icon-add-circle-fine');
				remove(pid,id);
				$('#menuPanel2').hide();
				$('#menuPanel3').hide();
			}
		});
	}

	function menuPanel1_click2(){
		$('#menuPanel1 .checkbox>label').click(function(){
			var pid = $('#menuPanel1 input[name="id"]').val();
			var name=$(this).data('name');
			var id=$(this).data('id');
			$(this).parent().find('.layui-icon-add-circle-fine').removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
			add(pid,id,name);
			showPanel2(id,name);
		});
	}
	
	function showPanel2(id,name){
		$('#menuPanel2 input[name="id"]').val(id);
		$('#menuPanel2 .box-header .box-title').html(name);
		$.getJSON('$!{webRoot}/agent/menu/child.data',{id:id},function(res){
			if(res.code == 200){
				$('#menuPanel2 .layui-card-body').empty();
				var arr = get(data,id).children;
				$(res.body).each(function(i,item){
					var str = 'layui-icon-add-circle-fine';
					$(arr).each(function(j,val){
						if(val.id == item.id){
							str='layui-icon-ok-circle';
							return;
						}
					});
					$('#menuPanel2 .layui-card-body').append('<div class="checkbox"><i class="layui-icon '+str+'"></i>'
						+'<label data-name="'+item.name+'" data-id="'+item.id+'">'+item.name+'</label></div>');
				});
				$('#menuPanel3').hide();
				$('#menuPanel2').show();
				menuPanel2_click1();
				menuPanel2_click2();
			}else if(res.code == 202){
				$('#menuPanel2 .layui-card-body').empty().append('<h5>$!{i18n.get("notData")}</h5>');
				$('#menuPanel2').show();
			}else{
				layer.msg(res.msg,{icon: 2});
			}
		});
	}

	function menuPanel2_click1(){
		$('#menuPanel2 .checkbox>.layui-icon').click(function(){
			var pid = $('#menuPanel2 input[name="id"]').val();
			var t=$(this).parent().find('label');
			var id = $(t).data('id');
			var name = $(t).data('name');
			if($(this).hasClass('layui-icon-add-circle-fine')){
				$(this).removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
				add(pid,id,name);
			}else{
				$(this).removeClass('layui-icon-ok-circle').addClass('layui-icon-add-circle-fine');
				remove(pid,id);
				$('#menuPanel3').hide();
			}
		});
	}

	function menuPanel2_click2(){
		$('#menuPanel2 .checkbox>label').click(function(){
			var pid = $('#menuPanel2 input[name="id"]').val();
			var name=$(this).data('name');
			var id=$(this).data('id');
			$(this).parent().find('.layui-icon-add-circle-fine').removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
			add(pid,id,name);
			$('#menuPanel3 input[name="id"]').val(id);
			$('#menuPanel3 .box-header .box-title').html(name);
			$.getJSON('$!{webRoot}/agent/menu/child.data',{id:id},function(res){
				if(res.code == 200){
					$('#menuPanel3 .layui-card-body').empty();
					var arr = get(data,id).children;
					$(res.body).each(function(i,item){
						var str = 'layui-icon-add-circle-fine';
						$(arr).each(function(j,val){
							if(val.id == item.id){
								str='layui-icon-ok-circle';
								return;
							}
						});
						$('#menuPanel3 .layui-card-body').append('<div class="checkbox"><i class="layui-icon '+str+'"></i>'
							+'<label data-name="'+item.name+'" data-id="'+item.id+'">'+item.name+'</label></div>');
					});
					$('#menuPanel3').show();
					menuPanel3_click1();
				}else if(res.code == 202){
					$('#menuPanel3 .layui-card-body').empty().append('<h5>$!{i18n.get("notData")}</h5>');
					$('#menuPanel3').show();
				}else{
					layer.msg(res.msg,{icon: 2});
				}
			});
		});
	}

	function menuPanel3_click1(){
		$('#menuPanel3 .checkbox>.layui-icon').click(function(){
			var pid = $('#menuPanel3 input[name="id"]').val();
			var t=$(this).parent().find('label');
			var id = $(t).data('id');
			var name = $(t).data('name');
			if($(this).hasClass('layui-icon-add-circle-fine')){
				$(this).removeClass('layui-icon-add-circle-fine').addClass('layui-icon-ok-circle');
				add(pid,id,name);
			}else{
				$(this).removeClass('layui-icon-ok-circle').addClass('layui-icon-add-circle-fine');
				remove(pid,id);
			}
		});
	}

	function selectPanel_click(){
		$('#selectedPanel .layui-card-body>p .layui-icon').click(function(){
			var id = $(this).parent().data('id');
			removeToArray(data,id);
			$('#menuPanel1').hide();
			$('#menuPanel2').hide();
			$('#menuPanel3').hide();
		});
	}

	$('#btnSubmit').click(function(){
		layer.confirm('确定要保存当前配置吗？', function(index) {
			var str = JSON.stringify(data);
			$('#selectedPanel form input[name="data"]').val(str);
			$('#selectedPanel form').ajaxSubmit(function (res) {
				if (res.code == 200) {
					layer.msg('保存成功',{icon: 1});
				} else {
					layer.msg(res.msg, {icon: 2});
				}
			});
			layer.close(index)
		});
	});
	//初始化
	show();
</script>
</body>
</html>